<template>
	<view class="level-main">
		<view class="dfj-flex dfj-flex-ai-c dfj-pd-30 dfj-t-white dfj-f-30">
			<view class="dfj-flex-1 dfj-t-l" @click="leftBack"><text class="dfj-icon icon-arrow-left"></text></view>
			<view>用户级别</view>
			<view class="dfj-flex-1 dfj-t-r"><text v-if="loginInfo.userInfo.isVip == 0" @click="toOpenVip">开通VIP</text></view>
		</view>
		
		<view class="dfj-flex dfj-flex-ai-c dfj-t-white dfj-pd-30">
			<view>
				<image style="width: 120rpx;height: 120rpx;border-radius: 100%;" mode="widthFix" :src="loginInfo.userInfo.headIcon || '/static/img/login.png'"></image>
			</view>
			<view class="dfj-flex-1 dfj-mg-l-30">
				<view>{{ loginInfo.userInfo.userName }}</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-mg-t-20">
					<view class="dfj-flex-1"><image style="width: 120rpx;height: auto;" mode="widthFix" :src="loginInfo.userInfo.isVip==1?loginInfo.levelVipIconUrl:loginInfo.levelIconUrl"></image></view>
					<view class="dfj-flex dfj-f-20">
						<view><text class="dfj-icon icon-xuanzhong dfj-mg-r-10"></text>直推{{ loginInfo.directCount }}人</view>
						<view class="dfj-mg-l-20 dfj-t-warning"><text class="dfj-icon icon-xuanzhong dfj-mg-r-10"></text>间推{{ loginInfo.indirectCount }}人</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20">
			<view><image style="width: 100rpx;height: auto;" mode="widthFix" :src="loginInfo.userInfo.isVip==1?loginInfo.levelVipIconUrl:loginInfo.levelIconUrl"></image></view>
			<view class="dfj-flex-1">
				<progress activeColor="#fff" backgroundColor="#007AFF" :percent="progressL" stroke-width="3" /> <!-- 直推 -->
				<progress activeColor="#fff" backgroundColor="#007AFF" :percent="progressR" stroke-width="3" /> <!-- 间推 -->
			</view>
			<view><image style="width: 100rpx;height: auto;" mode="widthFix" :src="loginInfo.userInfo.isVip==1?infoR.vipIconUrl:infoR.iconUrl"></image></view>
		</view>
		
		<view class="dfj-pd-50 dfj-t-c dfj-flex dfj-flex-ai-c dfj-flex-jc-c dfj-t-white">
			<text class="dfj-bg-white" style="height: 2rpx;overflow: hidden;width: 100rpx;display: inline-block;"></text>
			<text class="dfj-inline-block dfj-mg-lr-50">用户等级说明</text>
			<text class="dfj-bg-white" style="height: 2rpx;overflow: hidden;width: 100rpx;display: inline-block;"></text>
		</view>
		
		<view class="level-table dfj-bg-white dfj-bd-radius-20 dfj-mg-lr-30">
			<table>
				<tr>
					<th>等级</th>
					<th>日消费额度(元)</th>
					<th>团队人数</th>
				</tr>
				<block v-for="(item,index) in list">
					<tr>
						<td><image style="width: 100rpx;height: auto;" mode="widthFix" :src="loginInfo.userInfo.isVip==1 == 1?item.vipIconUrl:item.iconUrl"></image></td>
						<td>{{ item.vipQuota }}</td>
						<td>
							<view>直推 {{ item.vipNum }}</view>
							<view>间推 {{ item.vipGapNum }}</view>
						</td>
					</tr>
				</block>
				
			</table>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loginInfo: '',
				infoR:{}
			}
		},
		onLoad() {
			this.getInfo();
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
		},
		components:{
			progressL(){
				let vipNum = parseFloat(this.infoR.vipNum)
				let directCount = parseFloat(this.loginInfo.directCount)
				if (isNaN(vipNum) || isNaN(directCount)) {
				    return '-';
				}
				let totalNum = Math.round(curNum / totalNum * 10000) / 100.00 + '%';
				return totalNum;
			},
			progressR(){
				let vipGapNum = parseFloat(this.infoR.vipNum)
				let indirectCount = parseFloat(this.loginInfo.indirectCount)
				if (isNaN(vipNum) || isNaN(indirectCount)) {
				    return '-';
				}
				let totalNum = Math.round(curNum / totalNum * 10000) / 100.00 + '%';
				return totalNum;
			}
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			toOpenVip() {
				uni.navigateTo({
					url: '/pages/my/opening-vip'
				})
			},
			getInfo() {
				this.$http({
					url: '/userOpt/queryUserVipInfo'
				}).then(res=> {
					this.list = res.data;
					this.infoR = this.list[this.loginInfo.userInfo.level]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.level-main{
		background: url('/static/img/my/ic_level_bg_top.png') top center no-repeat;
		background-size: 100% auto;
	}
	.level-table{
		table{
			width: 100%;
			tr{
				color: #666;
				th{
					text-align: center;
					font-weight: normal;
					padding: 50rpx 0;
					border: 1px solid #E5E5E5;
				}
				td{
					padding: 40rpx 0;
					text-align: center;
					border: 1px solid #E5E5E5;
				}
			}
		}
	}
</style>
